<template>
  <div class="correctTaskType">
    <!-- 上传 -->
    <div
      v-if="computedGuidedlineOperType(item.operType, [operType['upload']])"
      class="content"
      @click="handelShowRegion(item)"
    >
      <div class="content" :class="{ 'is-showMoreContent': answerRegion }">
        <div class="contentBox">
          <!-- <div>
            <div class="iconUploadBox">
              <img :src="require('@/assets/images/answer.png')" />
            </div>
            <div class="iconUploadBoxhover">
              <img :src="require('@/assets/images/answerHover.png')" />
            </div>
          </div> -->
          <guidelineType :type="item.operType" />
          <div class="title" v-html="item.description">
            <!-- {{ taskIndex }}{{ item.description }} 上传 -->
          </div>
          <div class="guidelineType">
            <span style="margin-right: 10px">类型：{{ item.operType }}</span>
            <span style="margin-right: 5px">权重：{{ item.weightInTask }}</span>
          </div>
        </div>
        <div class="taskTypeDown" :class="{ iconRotate: answerRegion }">
          <img :src="require('@/assets/images/down3.png')" />
        </div>
      </div>
    </div>

    <!-- 简答 -->
    <div
      v-if="
        computedGuidedlineOperType(item.operType, [
          operType['show'],
          operType['reply'],
          operType['refer'],
          operType['brush'],
          operType['game']
        ])
      "
      class="content"
      @click="handelShowRegion(item)"
    >
      <div class="content" :class="{ 'is-showMoreContent': answerRegion }">
        <div class="contentBox">
          <div>
            <div class="iconUploadBox">
              <img :src="require('@/assets/images/answer.png')" />
            </div>
            <div class="iconUploadBoxhover">
              <img :src="require('@/assets/images/answerHover.png')" />
            </div>
          </div>
          <div
            class="title"
            v-html="item.description"
            @click.stop="handelCLickGuidelines"
          ></div>
          <div class="guidelineType">
            <span style="margin-right: 10px">类型：{{ item.operType }}</span>
            <span style="margin-right: 5px">权重：{{ item.weightInTask }}</span>
          </div>
        </div>
        <div class="taskTypeDown" :class="{ iconRotate: answerRegion }">
          <img
            :src="require('@/assets/images/down3.png')"
            v-if="
              item.operType == operType['show'] ||
              item.operType == operType['reply'] ||
              item.operType == operType['brush']
            "
          />
        </div>
      </div>
    </div>
    <!-- 播放 -->
    <!-- <div
      v-if="item.operType == operType['show']"
      class="content"
      @click="handelPlayVideo"
    >
      <div class="content">
        <div class="contentBox">
          <div class="iconUploadBox">
            <img :src="require('@/assets/images/video.png')" />
          </div>
          <div class="iconUploadBoxhover">
            <img :src="require('@/assets/images/videoH.png')" />
          </div>
          <div class="title" v-html="item.description">
            {{ taskIndex }}{{ item.description }} 播放
          </div>
        </div>
        <div class="taskTypeDown" :class="{ iconRotate: answerRegion }">
          <img :src="require('@/assets/images/down3.png')" />
        </div>
      </div>
    </div> -->
    <div class="studentList" v-if="answerRegion">
      <div class="learnedStudentsNone" v-if="nStudentData.length === 0">
        该引导文暂无学生完成学习
      </div>
      <div
        :class="{ flexBox: fitem.fState }"
        v-for="(fitem, findex) in nStudentData"
        :key="findex"
        class="studentCourseDataBox"
      >
        <div
          class="studentCourseData"
          :class="{
            shrinkCourseData: shrinkArr.indexOf(sitem.userID) !== -1,
            flexStudentCount_1: fitem.students.length == 1,
            flexStudentCount_2: fitem.students.length == 2,
            flexStudentCount_3: fitem.students.length == 3,
            flexStudentCount_4: fitem.students.length == 4,
            flexStudentCount_5: fitem.students.length == 5,
          }"
          v-for="(sitem, sindex) in fitem.students"
          :key="sindex"
        >
          <!-- unshow: sitem.state !== studentAnswerState[1], -->
          <div>
            <div class="studentInfo">
              <div class="pictuer">
                <img :src="sitem.iconPath" :key="findex" />
              </div>
              <div class="flexBoxStyle">
                <div class="name">
                  {{
                    sitem.uName
                  }}
                </div>
                <div class="time" title="完成时间">
                  {{ sitem.lastUpdatedTime | filterLastUpdateTime }}
                </div>
                <!-- <div class="num">{{ sitem.userID || "ID" }}</div> -->
                <div class="score">
                  {{
                    (computedGuidedlineOperType(item.operType, [operType['game']])
                      ? sitem.gameOrExciseScore
                      : sitem.guidelineScore) | filterDefaultScore
                  }}
                </div>
              </div>
              <div class="iconBox">
                <img
                  :src="require('@/assets/images/samllnarrowIcon.png')"
                  v-show="shrinkArr.indexOf(sitem.userID) == -1"
                  @click="handelShrink(sitem.userID)"
                />
                <img
                  v-show="shrinkArr.indexOf(sitem.userID) !== -1"
                  :src="require('@/assets/images/smallfullIcon.png')"
                  @click="handelFull(sitem.userID)"
                />
              </div>
            </div>
            <!-- 上传、简答的回答面板 -->
            <div
              class="answerRegion"
              :class="{
                'answerRegion-active': answerRegion,
              }"
              v-show="shrinkArr.indexOf(sitem.userID) == -1"
            >
              <div style="flex: 1; position: relative">
                <div
                  v-if="computedGuidedlineOperType(item.operType, [operType['brush']])"
                  class="textareaBox"
                  style="display:flex;justifly-content;center"
                >
                  <!-- 查看做题记录功能正在升级中... -->
                  <!-- 暂不显示刷题组件 暂无做题记录功能 -->
                  <brushQuestions
                    :title="`查看记录`"
                    :iframeRouter="iframeRouter"
                    :foreignID="item.foreignID"
                    :sitem="sitem"
                    :stuUserID="sitem.userID"
                    :iframeShow="iframeShow"
                    :isReview="true"
                    @handleIframeClose="handleIframeClose"
                    :isMarking="true"
                  />
                  <el-button type="text" size="mini" @click.stop="iframeShow = true" >打开刷题</el-button>
                </div>
                <div
                  v-if="computedGuidedlineOperType(item.operType, [operType['upload']])"
                  class="upload"
                >
                  <upload
                    ref="uploadComponents"
                    :correctStudentSbmJson="sitem"
                    :thisIndex="thisIndex"
                    :unShowGroupIcon="true"
                    :titem="titem"
                  />
                </div>
                <div
                  v-if="computedGuidedlineOperType(item.operType, [operType['show']])"
                  class="upload"
                >
                  <links :settedLink="sitem.submitContent.data.showLink" :isReview="true" />
                </div>
                <div
                  v-if="computedGuidedlineOperType(item.operType, [operType['reply']])"
                  class="textareaBox"
                >
                  <!-- <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="暂无学生输入的内容"
                    v-model="sitem.submitContent.data"
                    :disabled="true"
                  >
                  </el-input> -->
                  <wangEidtor :editId="new Date().getTime()" :placeholder="'无提交内容'" :menus="['link']" :isReview="true" 
                    :value="sitem.submitContent.data" :disabled="true"
                  />
                </div>
              </div>
            </div>
            <!-- 教师批阅 -->
            <remarkAndgrade
              :taskStudentIndex="taskIndex + '-' + sitem.userID"
              :fitem="fitem"
              :sitem="sitem"
              v-show="shrinkArr.indexOf(sitem.userID) == -1"
              :titem="titem"
              :taskGroupID="Number(taskGroupID)"
              :taskID="Number(taskID)"
              :studenData="studenData"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="showVideoBox">
      <el-dialog :visible.sync="showVideo" width="800px" top="25vh" center>
        <div v-if="showVideo" style="line-height: 0">
          <iframe
            src="https://player.bilibili.com/player.html?aid=799161464&bvid=BV1yy4y1Y7Ky&cid=297747836&page=1&as_wide=1&high_quality=1&danmaku=0"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
            width="100%"
            height="500px"
          >
          </iframe>
        </div>
      </el-dialog>
    </div> -->
    <previewImgVidoeFile
      :showPerview="showPerview"
      @close="handelclose"
      :showData="showData"
    />
  </div>
</template>

<script>
import { studentAnswerState, taskState, operType } from "@/util/guidingtextType";
import upload from "@/views/courses/detail/task_N/taskType_N/compoment/studyUpload.vue";
import remarkAndgrade from "@/views/teacher/correct/taskType/remarkgrade";
import previewImgVidoeFile from "@/components/previewImgVidoeFile/previewImgVidoeFile";
import { renderTimeToYMD, location_QuestionBank } from "@/util/tool";
import brushQuestions from "@/components/questionBankIframeDialog/index";
import { loadAllVideo } from "@/util/loadVideo";
import guidelineType from "@/components/guidelineTypeIcon/index"
const wangEidtor = ()=> import("@/components/wangEditor/index.vue")
const links = () =>
  import("@/views/courses/detail/task_N/taskType_N/compoment/links");
import { download } from "@/util/download"
export default {
  components: {
    upload,
    remarkAndgrade,
    previewImgVidoeFile,
    brushQuestions,
    wangEidtor,
    guidelineType,
    links
  },
  data() {
    return {
      taskState,
      operType,
      studentAnswerState, // 学生答案展示窗口状态
      showVideo: false, // 播放视频
      answerRegion: false, // 显示回答区域
      textarea: "", // 绑定简答的内容
      thisIndex: null, // 当前引导文索引
      uploadData: [], // 上传文件后的返回的数据
      shrinkArr: [], // 收缩展示学生答案的窗口
      studentsData: [
        {
          name: "用户名",
          userID: 9,
          submitContent: "asdads",
          state: 1,
        },
      ],
      showPerview: false, // 显示引导文的图片、视频、文档
      showData: {}, // 需要预览的数据
      iframeRouter: "", // 刷题链接
      iframeShow: false,
    };
  },
  props: {
    item: Object, // 当前引导数据
    taskIndex: String, // 任务组所在课程的编号-任务所在任务组的编号-引导文所在任务的编号
    courseInfo: Object, // 课程信息
    courseData: Object, // 课程数据
    titem: Object, // 当前任务的数据
    taskCommitJson: Object, //当前任务组的学习数据
    // userId: Number, // 用户id
    unShowGroupIcon: Boolean, // 在教师查看课程详情页面属于控制类参数
    taskGroupID: Number, // 任务组ID
    taskID: Number, // 任务ID
    studenData: Array, // 学生信息
  },
  filters: {
    filterLastUpdateTime(value) {
      return value ? renderTimeToYMD(value) : "无完成时间";
    },
    filterDefaultScore(value) {
      return value == -8 ? "暂未批阅" : value + "分";
    },
  },
  watch: {
    nShrinkArr(n, o) {
      // const nData = n.filter((item) => {
      //   return o.indexOf(item) == -1
      // })
      this.studentsData.map((item, index) => {
        if (n.indexOf(item.userID) !== -1) {
          item.state = this.studentAnswerState[0];
        } else {
          item.state = this.studentAnswerState[1];
        }
      });
    },
  },
  computed: {
    // 深拷贝
    nShrinkArr() {
      return JSON.parse(JSON.stringify(this.shrinkArr));
    },
    nStudentData() {
      let nData = [];
      let i = 0;
      this.item.studentGuilineList.forEach((item, index) => {
        let oData = { ...item };
        // 弹性状态 默认false 即学生答题信息展开
        oData.fState = false;
        // 如果当前状态为收起 弹性状态开启
        if (item.state == this.studentAnswerState[0]) {
          oData.fState = true;
        }

        let pushObj = {
          fState: oData.fState,
          students: [oData],
        };
        if (oData.fState) {
          if (index !== 0) {
            if (
              nData[nData.length - 1].fState &&
              nData[nData.length - 1].students.length < 4
            ) {
              nData[nData.length - 1].students.push(oData);
            } else {
              nData.push(pushObj);
            }
          } else {
            nData.push(pushObj);
          }
        } else {
          nData.push(pushObj);
        }
      });
      return nData;
    },
  },
  created() {
    this.thisIndex = Number(this.taskIndex.split("-")[2]);
    this.groupNoInCourse = Number(this.taskIndex.split("-")[0]);
    this.taskNoInGroup = Number(this.taskIndex.split("-")[1]);
    this.noInTask = Number(this.taskIndex.split("-")[2]);
    if (this.item.operType == operType['brush']) {
      this.iframeRouter = `${location_QuestionBank(window)}/brush/${
        this.item.foreignID ? this.item.foreignID : "0"
      }`;
      // this.iframeRouter = `http://localhost:3000/brush/${
      //   this.item.foreignID ? this.item.foreignID : "0"
      // }`;
    }
  },
  methods: {
    // 打开折叠组件
    handelShowRegion(item) {
      if (
        item.operType == operType['refer'] ||
        item.operType == operType['game'] 
      )
        return;
      this.answerRegion = !this.answerRegion;
      if (item.operType == operType['brush']) this.$nextTick(()=> this.iframeShow = this.answerRegion)

    },
    // 关闭dialog
    handleIframeClose() {
      this.iframeShow = false
    },
    // 打开播放视频窗口
    handelPlayVideo() {
      this.showVideo = true;
    },
    // 收缩展示学生答案的窗口
    handelShrink(index) {
      this.shrinkArr.push(index);
    },
    // 放大展示学生答案的窗口
    handelFull(index) {
      const newIndex = this.shrinkArr.filter((item) => item !== index);
      this.shrinkArr = newIndex;
    },
    // 点击引导文
    handelCLickGuidelines(e) {
      // debugger
      if (e.target.tagName === "VIDEO") {
        window.event
          ? (window.event.cancelBubble = true) && (e.cancelBubble = true)
          : e.stopPropagation();
        this.formatObjdata(e.target.attributes[":src"].value);
        // 阻止默认行为
        e.preventDefault();
      } else if (e.target.tagName === "IMG") {
        window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
        this.formatObjdata(e.target.currentSrc);
        // 阻止默认行为
        e.preventDefault();
      } else if (e.target.tagName === "A") {
        window.event ? (window.event.cancelBubble = true) : e.stopPropagation();
        let url = e.target.href;
        // 使用正则将http开头的链接转换为https，并且是以http://codelover.club或http://www.codelover.club开头的链接。
        url = url.replace(/http:\/\/(www\.)?codelover\.club/g, "https://$1codelover.club");
        e.target.download = e.target.innerText;
        // download(url, e.target.innerText)
        window.open(url);
        // 阻止默认行为
        e.preventDefault();
        // this.formatObjdata(e.target.href);
      }
    },
    // 关闭预览引导文文件窗口
    handelclose() {
      this.showPerview = false;
    },
    // 格式化对象数据
    formatObjdata(url) {
      let obj = {
        type: "",
        url: "",
      };
      obj.type = url.substring(url.lastIndexOf(".") + 1);
      // 如果当前链接是bilibili网站则播放时打开bilibili播放器
      if (url.indexOf("bilibili.com") !== -1) {
        // obj.type = 'bilibiliPlay'
        window.open(url);
        return;
      }
      obj.url = url;
      if (obj.type && obj.url) {
        this.showPerview = true;
        this.showData = obj;
      }
    },
    /**
     * @description 判断类型
     */
    computedGuidedlineOperType(type, condition) {
      if (condition.indexOf(type) !== -1) return true;
      return false;
    },
    // 加载所有视频
    loadAllVideo() {
      return loadAllVideo(this);
    },
    // 更新学生信息
    changeUserData(sitem, commentData) {
      let findUserDataIndex = this.item.studentGuilineList.findIndex(
        (item) => item.userID == sitem.userID
      );
      this.item.studentGuilineList[findUserDataIndex] = commentData;
      this.$forceUpdate();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.loadAllVideo();
    });
  },
};
</script>

<style lang="stylus">
.correctTaskType {
  height: auto;

  .content {
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 47px;
    font-family: PMingLiU-ExtB;
    font-size: 14px;
    color: #000000;

    .content {
      padding-right: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between !important;
      flex: 1;

      .contentBox {
        display: flex;
        flex: 1;

        .guidelineType {
          margin-left: auto;
          min-width: 145px;
          line-height: 27px;
        }
      }

      .taskTypeDown {
        min-width: 25px;
        min-height: 25px;
        transition: all 0.2s linear;

        img {
          width: 25px;
          margin: 0;
          object-fit: cover;
        }
      }

      .iconRotate {
        transform: rotate(180deg);
      }
    }

    .iconUploadBox, .iconUploadBoxhover {
      margin-right: 10px;
      width: 24px;
      height: 27px;

      img {
        object-fit: cover;
      }
    }

    .iconUploadBoxhover {
      display: none;
    }

    .iconPlayBox {
      margin-right: 10px;
      width: 24px;
      height: 24px;

      img {
        object-fit: cover;
      }
    }

    .iconBriefanswerBox {
      margin-right: 10px;
      width: 24px;
      height: 27px;

      img {
        object-fit: cover;
      }
    }

    .title {
      padding-top: 3px;
      // flex: 0;
      // width: 543px;
      // width: 70%;
      font-family: PMingLiU-ExtB;
      font-size: 14px;
      color: #000000;
      word-spacing: 5px;

      p {
        display: none;

        a {
          padding-right: 25px;
          position: relative;
          background-color: transparent !important;
        }

        a::after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          width: 20px;
          height: 20px;
          background-image: url('~@/assets/images/linkIcon.svg');
          background-size: 20px auto;
          background-repeat: no-repeat;
          transform: translate(0, -4px);
        }
      }

      p:first-child {
        display: block;
      }
    }

    .is-showMoreContent {
      .title {
        p {
          display: block;
        }
      }
    }

    .finishTask {
      margin: 0 19px 0 auto;
      display: flex;
      align-items: center;
      font-family: PMingLiU-ExtB;
      font-size: 12px;
      color: #666666;

      .tips {
        font-family: PMingLiU-ExtB;
        font-size: 12px;
        color: #666666;
      }

      .iconBox {
        margin-left: 5px;
        line-height: 1;

        img {
          vertical-align: initial;
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .content:hover {
    background-color: #fff6e1;
    border-radius: 8px;

    .iconUploadBox {
      display: none;
    }

    .iconUploadBoxhover {
      display: block;
    }
  }

  .answerRegion {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    height: 0;
    transition: all 0.4s linear;
    overflow: hidden;

    .textareaBox {
      margin-top: 7px;

      .w-e-text-container {
        max-width: 800px;
      }
      .el-textarea {
        .el-textarea__inner {
          border-color: #9fa7b6 !important;
          resize: none;
          max-height: 130px !important;
          border-radius: 5px;
          border: solid 1px #707070;
        }

        .el-textarea__inner::-webkit-scrollbar {
          width: 4px;
          height: 1px;
        }

        /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
        .el-textarea__inner::-webkit-scrollbar-thumb {
          border-radius: 4px;
          -webkit-box-shadow: inset 0 0 1px #bfc4c3;
          background: #dbdbdb;
        }

        /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
        .el-textarea__inner::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 1px #E6FAF3;
          border-radius: 4px;
        }
      }

      .is-disabled {
        .el-textarea__inner {
          cursor: default;
          background: #fff;
        }
      }
    }

    // .btn {
    // margin-top: 13px;
    // display: flex;

    // button {
    // cursor: pointer;
    // outline: none;
    // margin-right: 59px;
    // width: 80px;
    // height: 26px;
    // background-color: #f6ad35;
    // border-radius: 5px;
    // border: none;
    // font-family: PMingLiU-ExtB;
    // font-size: 14px;
    // color: #ededed;
    // }

    // .unUpdate {
    // cursor: not-allowed;
    // background-color: #bfbfbf;
    // }

    // .updateBtn {
    // margin: 0;
    // cursor: not-allowed;
    // background-color: #bfbfbf;
    // }

    // .canuseUpdate {
    // cursor: pointer;
    // background-color: #f6ad35;
    // }
    // }
    .upload {
      margin-top: 7px;
      line-height: 1;

      .uploadComponent {
        .upload-demo {
          .el-upload-dragger {
            min-height: 58px;

            .el-icon-upload, .el-upload__text {
              display: none;
            }
          }
        }
      }
    }

    .isChecked {
      margin-top: 5px;
      flex: unset !important;
      width: 355px;
    }

    .teacherRemarkAndScore {
      margin-top: 5px;
      flex: 1;
      // min-height: 130px;
      padding: 26px 0 22px 49px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      .remarkBox, .scoreBox {
        display: flex;
        min-height: 30px;
        border: 1px solid #BFBFBF;
        border-radius: 9px;
        overflow: hidden;

        .title {
          margin-right: 17px;
          // float: left;
          min-width: 60px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-family: PMingLiU-ExtB;
          font-size: 14px;
          color: #ededed;
          background-color: #f6ad35;
          border-radius: 8px;
        }

        .content {
          cursor: default;
          min-height: unset;
          font-family: PMingLiU-ExtB;
          font-size: 14px;
          color: #000000;
        }

        .content:hover {
          background: unset;
        }
      }
    }
  }

  .answerRegion-active {
    height: unset;
    // padding-bottom: 18px;
  }

  .showVideoBox {
    .el-dialog {
      .el-dialog__header {
        .el-dialog__headerbtn {
          top: 12px;
          right: 21px;

          .el-icon-close {
            transition: opacity 0.2s linear;
            opacity: 0;
          }

          .el-icon-close:before {
            font-size: 22px;
            font-weight: bold;
            color: #d12929;
          }
        }
      }

      .el-dialog__header, .el-dialog__body {
        padding: 0;
      }
    }

    .el-dialog:hover {
      .el-dialog__header {
        .el-dialog__headerbtn {
          .el-icon-close {
            opacity: 1;
          }
        }
      }
    }
  }

  .studentList {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;

    .learnedStudentsNone {
      text-align: center;
      font-size: 14px;
    }

    .flexBox {
      display: flex;
      justify-content: space-between;
    }

    .studentCourseData:hover {
      // background-color: rgba(252, 252, 252, 0.3);
      background-color: rgba(250, 250, 250, 0.9);

      .el-input .el-input__inner {
        background-color: rgba(250, 250, 250, 0.9);
      }
    }

    .studentCourseData {
      margin-top: 20px;
      padding: 5px 27px 30px 12px;
      border-radius: 10px;
      border: solid 1px #c4d3dc;
      transition: all 0.2s linear;
      border-radius: 10px;
      transition: background-color 0.1s linear;

      .el-input .el-input__inner {
        transition: background-color 0.1s linear;
      }

      .el-upload-dragger {
        border-color: #9fa7b6;
      }

      .studentInfo {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .pictuer {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: #828282;
          overflow: hidden;
        }

        .flexBoxStyle {
          // margin-left: 12px;
          display: flex;
          // flex-direction: column;
          // justify-content: space-between;
          align-items: flex-start;

          .name, .num {
            margin-left: 15px;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #333333;
          }

          .time {
            margin-left: 27px;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #f1ae3d;
          }

          .score {
            margin-left: 30px;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #f1ae3d;
          }
        }

        .iconBox {
          margin: 0 0 0 auto;

          img {
            width: 11px;
            height: 11px;
            cursor: pointer;
          }
        }
      }
    }

    .shrinkCourseData {
      flex: 1;
      padding-bottom: 0;
      width: 199px;
      height: 105px;
      border-radius: 10px;
      height: 65px;
      overflow: hidden;
      transition: all 0.2s linear;

      .time, .num {
        display: none;
      }
    }

    .flexStudentCount_1, .flexStudentCount_2 {
      .num {
        display: block;
      }
    }

    .flexStudentCount_1 {
      width: unset;
    }

    .flexStudentCount_2 {
      flex: unset;
      width: calc(((100% - 19px) / 2));
    }

    .flexStudentCount_3 {
      flex: unset;
      width: calc(((100% - (19px * 2)) / 3));
    }

    .flexStudentCount_4 {
      flex: unset;
      width: calc(((100% - (19px * 3)) / 4));
      display: flex;
      align-items: center;
      width: 199px;
      height: 105px;
      border-radius: 10px;
      position: relative;

      .studentInfo {
        .flexBoxStyle {
          margin-left: 12px;
          flex-direction: column;

          .name, .score {
            margin: 0;
          }
        }

        .iconBox {
          position: absolute;
          top: 12px;
          right: 19px;
        }
      }
    }

    .flexStudentCount_5 {
    }

    .unshow {
      padding: 0;
      margin: 0;
      display: none !important;
      border: none;
    }

    .studentList-flexBox {
      display: flex;
      flex-flow: wrap row;

      .studentCourseData {
        flex: 1 auto;
        padding: 0;
        padding-left: 20px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 199px;
        height: 105px;
        border-radius: 10px;

        .flexBoxStyle {
          margin-left: 12px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .name, .score {
            margin: 0;
          }
        }

        .iconBox {
          position: absolute;
          top: 12px;
          right: 19px;
        }
      }

      .studentCourseData:hover {
        background-color: #fff0d6;
        border-color: #fff0d6;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .correctTaskType {
    .answerRegion {
      margin-top: 20px;
      padding-left: 0;
    }

    .el-dialog__body {
      iframe {
        width: 90vw;
        height: 80vh;
      }
    }
  }
}
</style>